<script setup>
import {onMounted} from 'vue'
import {
  tableData,
  getTableData,
  templateTypeData,
  transportTypeData,
  textReplacement,
} from '/src/Views/transit/freight.js'
import {title, dialogShow, handleEdit, handleDelete} from '/src/components/Dialog/Dialog.js'

// 渲染前调用接口获取数据
onMounted(() => {
  getTableData()
})

function changeTitle() {
  title.value = '新增模板'
  dialogShow.value = true
}
</script>

<template>
  <div class="box">
    <el-button class="addTemplate" @click="changeTitle">新增模板</el-button>
    <div class="tableBox">
      <!--
        :data  提供数据的对象
        label 表头名字
        align 控制表格对齐方向
        prop 显示的数据
        scope.$index 当前行索引
        scope.row当前行数据
        formatter格式化处理显示数据
      -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="模版类型" prop="templateType" :formatter="templateTypeData" width="200"/>
        <el-table-column label="运送类型" prop="transportType" :formatter="transportTypeData"/>
        <el-table-column label="关联城市" prop="associatedCityList" width="300" :formatter="textReplacement"/>
        <el-table-column label="首重" prop="firstWeight"/>
        <el-table-column label="续重" prop="continuousWeight"/>
        <el-table-column label="轻抛系数" prop="lightThrowingCoefficient"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >
              <span>编辑</span>
            </el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >
              <span>删除</span>
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!--    弹窗-->
  <Dialog></Dialog>
</template>

<style scoped lang="less">
.box {
  padding: 25px;
  border-radius: 4px;
  background-color: #fff;

  .addTemplate {
    width: 100px;
    height: 40px;
    background-color: #e15536;
    border: none;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
  }
}

.tableBox, .el-table {
  padding: 0;
}

::v-deep(.el-table th) {
  font-size: 14px;
  color: rgba(129, 134, 147, 0.88);
  letter-spacing: 0;
  line-height: 22px;
  font-weight: 500;
  background: #F6F7FA;
}
</style>
